<template>
	<div class="message_container">
		<div class="header">
			<h2>个人消息</h2>
			<el-button type="text" icon="sw-icon-btn-readed" @click="handleAllSetReaded()">全部标记为已读</el-button>
		</div>
		<el-row :gutter="20">
			<el-col :span="responsive" v-for="(item, index) in messageData" :key="index">
				<el-card>
					<template slot="header">
						<template v-if="item.isRead === '1'">
							<i class="badge sw-icon-badge-readed"></i>
						</template>
						<template v-if="item.isRead === '2'">
							<i class="badge sw-icon-badge-unread"></i>
						</template>
						<el-avatar :size="36" fit="cover" :src="item.operUser.avatar"></el-avatar>
						<div class="info">
							<h4>{{ item.operUser.name }}</h4>
							<p>{{ item.operUser.date }}</p>
						</div>
					</template>
					<template v-if="item.filed1 === '1'">
						<p @click="handleLookDetail(item)">
							<span>{{ item.operUser.name }}</span>
							<span>【提交】</span>
							<span>了{{ item.type | messageStatus }}《{{ item.content }}》</span>
						</p>
					</template>
					<template v-else-if="item.filed1 === '2'">
						<p @click="handleLookDetail(item)">
							<span>{{ item.operUser.name }}</span>
							<span>审核</span>
							<font :color="item.filed3 | auditColor">【{{ item.filed3 | auditType }}】</font>
							<span>了{{ item.type | messageStatus }}《{{ item.content }}》</span>
						</p>
					</template>
				</el-card>
			</el-col>
		</el-row>
		<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" :page-sizes="pageSizes" @change="queryMessageData"></sw-pagination>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { marvelDetail } from '@/api/business/tbMarvel';
import { queryMailPageList, updateMail, updateAllMail } from '@/api/business/tbMail';
export default {
	data() {
		return {
			loading: false,
			dataCount: 0,
			queryData: { page: 1, limit: 24 },
			pageSizes: [24, 48, 96],
			messageData: [],
			responsive: 12
		};
	},
	computed: {
		...mapGetters(['userInfo', 'siteInfo']),
		roleType() {
			return this.userInfo.roleList[0];
		}
	},
	filters: {
		auditType(input) {
			if (input === '1') {
				return '通过';
			} else if (input === '2') {
				return '驳回';
			} else {
				return input;
			}
		},
		auditColor(input) {
			if (input === '1') {
				return '#67C23A';
			} else if (input === '2') {
				return '#F56C6C';
			}
		},
		messageStatus(input) {
			if (input === '1') {
				return '课题';
			} else if (input === '2') {
				return '实验';
			} else if (input === '3') {
				return '总结';
			} else if (input === '4') {
				return '成果';
			} else {
				return input;
			}
		}
	},
	mounted() {
		this.dynamicUpdateColumn();
		window.addEventListener('resize', () => {
			this.dynamicUpdateColumn();
		});
		this.queryMessageData();
	},
	methods: {
		//获取成果总结详情
		async getMarvelDetail(id) {
			let result = await marvelDetail(id).then((res) => res.data);
			if (result.code === '0') {
				let datas = this.$detailData(result.data);
				if (datas.type === '1') {
					return Promise.resolve(datas.experimentId);
				} else if (datas.type === '2') {
					return Promise.resolve(datas.topicId);
				} else {
					return Promise.resolve(id);
				}
			}
		},

		//获取消息数据
		async getMessageListData() {
			let params = { ...this.queryData, filed5: '1' };
			let result = await queryMailPageList(params).then((res) => res.data);
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.messageData = this.formatMessageData(result.data || []);
			}
		},

		//格式化消息数据
		formatMessageData(arr) {
			return arr.map((item) => {
				let user = {};
				let operUser = { date: item.createTime };
				if (item.filed1 === '1') {
					user = { ...item.createUser };
				} else if (item.filed1 === '2') {
					user = { ...item.auditUser };
				}
				operUser['name'] = user.userName;
				operUser['avatar'] = this.getAvatarPath(user);
				return { ...item, operUser };
			});
		},

		//用户头像地址
		getAvatarPath(data) {
			if (!!data.picId && data.picId !== '-1') {
				return data.picPath;
			} else if (!!this.siteInfo.userPic) {
				return this.siteInfo.avatarPath;
			} else {
				return require('@/assets/img/avatar_image.png');
			}
		},

		//查询消息数据
		queryMessageData() {
			this.loading = true;
			this.getMessageListData();
		},

		//全部标记为已读
		async handleAllSetReaded() {
			let result = await updateAllMail().then((res) => res.data);
			if (result.code === '0') {
				this.$showCustomMessage('success', `全部标记为已读成功`);
				this.$store.dispatch('getUnreadMailCount');
				this.queryMessageData();
			}
		},

		//跳转页面
		jumpDetailPage(data) {
			let userRole = '';
			let routerPath = '';
			if (this.roleType === 1) {
			} else if (this.roleType === 2) {
			} else if (this.roleType === 3) {
				userRole = 'principal';
			} else if (this.roleType === 4) {
				userRole = 'member';
			}
			if (data.type === '1') {
				routerPath = `/${userRole}/project/detail`;
			} else if (data.type === '2') {
				routerPath = `/${userRole}/experiment/detail`;
			} else if (data.type === '3' || data.type === '4') {
				routerPath = `/${userRole}/achievement/detail`;
			}
			this.visible = false;
			this.$router.push({ path: routerPath, query: { id: data.cpId } });
		},

		//查看详情
		async handleLookDetail(data) {
			if (data.isRead === '2') {
				let params = { id: data.id };
				let result = await updateMail(params).then((res) => res.data);
				if (result.code === '0') {
					this.jumpDetailPage(data);
					this.$store.dispatch('getUnreadMailCount');
				}
			} else if (data.isRead === '1') {
				this.jumpDetailPage(data);
			}
		},

		//动态修改列
		dynamicUpdateColumn() {
			let width = document.body.clientWidth;
			if (width >= 1200) this.responsive = 8;
			if (width > 1366) this.responsive = 6;
			if (width > 1920) this.responsive = 4;
		}
	}
};
</script>
<style lang="scss" scoped>
.message_container::v-deep {
	display: flex;
	flex-direction: column;
	height: 100%;

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20px;
		flex-shrink: 0;
		h2 {
			font-size: 20px;
			line-height: 1;
		}
		.el-button {
			font-size: 16px;
			padding: 0;
		}
		.sw-icon-btn-readed {
			margin-right: 6px;
		}
	}
	.el-row {
		flex: 1;
		overflow: auto;
	}
	.el-col {
		margin-top: 20px;
		&:nth-child(1),
		&:nth-child(2),
		&:nth-child(3) {
			margin-top: 0;
		}
		&.el-col-6:nth-child(4) {
			margin-top: 0;
		}
		&.el-col-4:nth-child(4),
		&.el-col-4:nth-child(5),
		&.el-col-4:nth-child(6) {
			margin-top: 0;
		}
	}
	.el-card__header {
		display: flex;
		padding: 16px;
		border-bottom: none;
		position: relative;
		i.badge {
			position: absolute;
			top: 0;
			left: 0;
			font-size: 32px;
			&.sw-icon-badge-readed {
				color: #67c23a;
			}
			&.sw-icon-badge-unread {
				color: #e6a23c;
			}
		}
	}
	.el-card__body {
		height: 84px;
		overflow: hidden;
		padding: 0 16px 16px;
		p {
			font-size: 16px;
			line-height: 1.75em;
			color: #606266;
			cursor: pointer;
		}
	}
	.el-avatar {
		margin-right: 10px;
		img {
			width: 100%;
		}
	}
	.info h4 {
		font-size: 14px;
		line-height: 1;
		margin-bottom: 8px;
	}
	.info p {
		font-size: 14px;
		line-height: 1;
		color: #909399;
	}
}
</style>
